<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import prileInfo from '@/components/prile-info.vue'
//import lQrcode from '@/pages/equipment/components/l-qrcode/l-qrcode.vue'
import { useDeviceStore } from '@/stores'
import { getQrCodeApi } from '@/services/equipment'
const deviceStore = useDeviceStore()
const props = defineProps<{
  deviceNum: string
}>()

const baseUrl = 'https://szsensing.com:8581/'
const qrimg = ref('')
const popup = ref<UniHelper.UniPopupInstance>()
const showqr = async (deviceNum: string) => {
  /* val.value = JSON.stringify({
    deviceNum,
  }) */
  const res = await getQrCodeApi(deviceNum)
  qrimg.value = baseUrl + res.data
  popup.value?.open()
}
const getHarDwareDetail = () => {
  deviceStore.getHarDwareDetail(props.deviceNum)
}
onLoad(() => {
  getHarDwareDetail()
})
const editinfo = () => {
  uni.navigateTo({
    url: '/pages/edit-equipment/edit-equipment',
  })
}

const calibrateDevice = () => {
  uni.navigateTo({
    url: '/pagesDevice/bt-device-list/bt-device-list?type=calibrate',
  })
}
const back = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>
<template>
  <view class="content">
    <prile-info
      :picture="deviceStore?.HarDwareDetail!.picture"
      :deviceNum="deviceStore?.HarDwareDetail!.deviceNum"
      :id="deviceStore?.HarDwareDetail!.id"
      :name="deviceStore?.HarDwareDetail!.name"
      :key="deviceStore?.HarDwareDetail!.id"
      :delete="true"
      @showqr="showqr"
    ></prile-info>
    <view class="device-info">
      <uni-section class="mb-10" title="设备信息" type="line"></uni-section>
    </view>
    <view class="device-info-box">
      <view class="device-info-item">
        <view class="device-info-item-title">型号</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwareDetail?.model }}</view>
      </view>
      <view class="device-info-item">
        <view class="device-info-item-title">设备号</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwareDetail?.deviceNum }}</view>
      </view>
      <view class="device-info-item">
        <view class="device-info-item-title">WIFI信息</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwareDetail?.wifi }}</view>
      </view>
      <view class="device-info-item">
        <view class="device-info-item-title">版本</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwareDetail?.hver }}</view>
      </view>
    </view>
    <view class="device-info">
      <uni-section class="mb-10" title="使用者信息" type="line"></uni-section>
      <view class="editbutton" @click="editinfo">编辑资料</view>
    </view>
    <view class="device-info-box">
      <view class="device-info-item">
        <view class="device-info-item-title">昵称</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwareDetail?.name }}</view>
      </view>
      <view class="device-info-item">
        <view class="device-info-item-title">性别</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwaresex }}</view>
      </view>
      <view class="device-info-item">
        <view class="device-info-item-title">年龄</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwareDetail?.age + '岁' }}</view>
      </view>
      <view class="device-info-item">
        <view class="device-info-item-title">体重</view>
        <view class="device-info-item-content">{{ deviceStore?.HarDwareDetail?.weight + 'kg' }} </view>
      </view>
    </view>

    <button @click="calibrateDevice" class="button_box">
      <uni-icons type="gear-filled" color="#ffff"></uni-icons><view>校准设备</view>
    </button>

    <uni-popup ref="popup" type="center" background-color="#fff">
      <img :src="qrimg" alt="" style="width: 384.615rpx; height: 384.615rpx" />
    </uni-popup>
  </view>
</template>
<style lang="scss">
page {
  height: 100%;
  font-family: PingFangSC-regular;

  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f8f8f8;
    padding-top: 38.462rpx;
    .device-info {
      display: flex;
      margin: 28.846rpx auto;
      width: 690.385rpx;
      align-items: center;
      .uni-section {
        background-color: #f8f8f8;
      }
      .editbutton {
        font-size: 19.231rpx;
        display: flex;
        align-items: center;
        margin-left: 346.154rpx;
        background-color: #28bb9c;
        color: #ffff;
        border-radius: 7.692rpx;
        padding: 9.615rpx 19.231rpx;
      }
    }
    .device-info-box {
      margin: 0 auto;
      width: 690.385rpx;
      height: 298.077rpx;
      background-color: #ffff;
      padding: 38.462rpx 28.846rpx;
      box-sizing: border-box;
      font-size: 26.923rpx;
      .device-info-item {
        display: flex;
        margin-bottom: 23.077rpx;
        .device-info-item-title {
          width: 201.923rpx;
        }
      }
    }
    .button_box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 442.308rpx;
      height: 80rpx;
      margin-top: 38.462rpx;
      font-size: 28rpx;
      border-radius: 72rpx;
      color: #fff;
      background-color: #28bb9c;
      view {
        height: 100%;
        line-height: 80.769rpx;
        margin-left: 9.615rpx;
      }
    }
    .u-safe-bottom {
      display: none !important ;
    }
  }
}
</style>
